<template>
    <el-container>
        <el-main>
            <h3>基本信息</h3>
            <hr/>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="产品名称" prop="cpmc" style="width: 350px">
                            <el-input v-model="ruleForm.cpmc"></el-input>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple-light">
                        <el-form-item label="产品分类" prop="cpfl" style="width: 350px">
                            <el-input v-model="ruleForm.cpfl"></el-input>
                        </el-form-item>
                    </div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="产品型号" prop="cpxh" style="width: 350px">
                            <el-input v-model="ruleForm.cpxh"></el-input>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple-light">
                        <el-form-item label="产品单位" prop="cpdw" style="width: 350px">
                            <el-input v-model="ruleForm.cpdw"></el-input>
                        </el-form-item>
                    </div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="产品日期" required >
                            <el-col :span="11">
                                <el-form-item prop="cprq" style="width: 250px">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.cprq" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple-light">
                        <el-form-item label="产品数量" prop="cpnum" style="width: 350px">
                            <el-input v-model="ruleForm.cpnum"></el-input>
                        </el-form-item>
                    </div></el-col>
                </el-row>
                <h3>商品价格</h3>
                <hr/>
                <el-form-item label="成本价" prop="cbj" style="width: 350px">
                    <el-input v-model="ruleForm.cbj"></el-input>
                </el-form-item>
                <el-form-item label="市场价" prop="scj" style="width: 350px">
                    <el-input v-model="ruleForm.scj"></el-input>
                </el-form-item>
                <h3>产品主图(1张)</h3>
                <hr/>
                <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <h3>产品图片(3张)</h3>
                <hr/>
                <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        multiple="1"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <h3>产品基础配置</h3>
                <hr/>
                <el-row>
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="处理器" prop="cpu" style="width: 350px">
                            <el-input v-model="ruleForm.cpu"></el-input>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple-light">
                        <el-form-item label="运行内存" prop="yxnc" style="width: 350px">
                            <el-input v-model="ruleForm.yxnc"></el-input>
                        </el-form-item>
                    </div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="储存内存" prop="ccnc" style="width: 350px">
                            <el-input v-model="ruleForm.ccnc"></el-input>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple-light">
                        <el-form-item label="颜色" prop="color" style="width: 350px">
                            <el-input v-model="ruleForm.color"></el-input>
                        </el-form-item>
                    </div></el-col>
                </el-row>
                <el-form-item style="margin-left: 300px;margin-top: 70px">
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "Qxiugai",
        data() {
            return {
                ruleForm: {
                    cpmc: '',
                    cpxh: '',
                    cpfl: '',
                    cprq: '',
                    cpnum: '',
                    cpdw: '',
                    dialogImageUrl: '',
                    dialogVisible: false


                },
                rules: {
                    cpmc: [
                        {required: true, message: '请输入产品名称'},
                    ],
                    cpxh:[
                        {required: true, message: '请输入产品型号'},
                    ],
                    cpfl:[
                        {required: true, message: '请输入产品分类'},
                    ],
                    cpdw:[
                        {required: true, message: '请输入产品单位'},
                    ],
                    cpnum:[
                        {required: true, message: '请输入产品数量'},
                    ],
                    cprq: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    cpu: [
                        {required: true, message: '请输入处理器'},
                    ],
                    yxnc: [
                        {required: true, message: '请输入运行内存'},
                    ],
                    ccnc: [
                        {required: true, message: '请输入储存内存'},
                    ],
                    color: [
                        {required: true, message: '请输入颜色'},
                    ],

                },
                methods: {
                    submitForm(formName) {
                        this.$refs[formName].validate((valid) => {
                            if (valid) {
                                alert('submit!');
                            } else {
                                window.console.log('error submit!!');
                                return false;
                            }
                        });
                    },
                    resetForm(formName) {
                        this.$refs[formName].resetFields();
                    },
                    handleRemove(file, fileList) {
                        window.console.log(file, fileList);
                    },
                    handlePictureCardPreview(file) {
                        this.dialogImageUrl = file.url;
                        this.dialogVisible = true;
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .el-main {
        background-color: #ffffff;
        color: #333;

    }
    body > .el-container {
        margin-bottom: 40px;
    }
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>